/* eslint-disable no-unused-vars */
import React, { useEffect, useState } from "react";
import styles from './tcappshow.module.css'
import SubmitButton from "@/pages/components/submitButton/submitButton";
import Space from "@/pages/components/space/space";
import Card from "@/pages/components/card/card";
import FlexRow from "@/pages/components/flexLayout/flexRow";
import FlexRowItem from "@/pages/components/flexLayout/flexRowItem";
import LineRow from "@/pages/components/line/lineRow";
import Paragraph from "@/pages/components/paragraph/paragraph";
import Title from "@/pages/components/paragraph/title";
import Text from "@/pages/components/paragraph/text";
import FlexColumn from "@/pages/components/flexLayout/flexColumn";
import { getAppConfigCache } from "../viewmodel/appshowImpl";

export default function TcAppShowLayout() {
    const [isLoading, setIsLoading] = useState(false);
    const [config, setConfig] = useState('');
    const [process, setProcess] = useState('');

    useEffect(() => {
        onHandleRefresh()
        return () => {
        }
    }, [])

    const queryData = async () => {
        let result = await getAppConfigCache();
        let configJson = JSON.parse(result.config);
        const newConfig = JSON.stringify(configJson, null, 4);
        setConfig(newConfig);

        let processJson = JSON.parse(result.process);
        const newProcess = JSON.stringify(processJson, null, 4);
        setProcess(newProcess);
    }

    const onHandleCopy = () => {
        // TODO: 实现复制功能
    }

    const onHandleRefresh = async () => {
        setIsLoading(true);
        try {
            // TODO: 实现刷新逻辑
            await queryData();
            await new Promise(resolve => setTimeout(resolve, 1000));

        } finally {
            setIsLoading(false);
        }
    }

    return (
        <div className={styles.tcAppShowRoot}>
            <Card title="配置信息" style={{ width: '100%' }}>
                <FlexRow style={{ gap: '24px' }}>
                    <FlexRowItem flex={1} style={{ minWidth: 0 }}>
                        <FlexColumn>
                            <Paragraph style={{
                                height: '370px',
                                border: '1px solid #e8e8e8',
                                borderRadius: '4px',
                                backgroundColor: '#fafafa',
                                position: 'relative'
                            }}>
                                {isLoading && (
                                    <div className={styles.loadingOverlay}>
                                        <div className={styles.loadingSpinner}></div>
                                    </div>
                                )}
                                <Text>{config}</Text>
                            </Paragraph>

                            <Space size="24px" />

                            <FlexRow style={{ marginLeft: '2px' }}>
                                <SubmitButton label="复制" onClick={() => { onHandleCopy() }} />
                                <Space />
                                <SubmitButton
                                    danger
                                    label="刷新"
                                    onClick={() => { onHandleRefresh() }}
                                    disabled={isLoading}
                                />
                            </FlexRow>
                        </FlexColumn>
                    </FlexRowItem>

                    <FlexRowItem flex={1} style={{ minWidth: 0 }}>
                        <FlexColumn>
                            <Paragraph style={{
                                height: '370px',
                                border: '1px solid #e8e8e8',
                                borderRadius: '4px',
                                backgroundColor: '#fafafa',
                                position: 'relative'
                            }}>
                                {isLoading && (
                                    <div className={styles.loadingOverlay}>
                                        <div className={styles.loadingSpinner}></div>
                                    </div>
                                )}
                                <Text>{process}</Text>
                            </Paragraph>

                            <Space size="24px" />

                            <FlexRow style={{ marginLeft: '2px' }}>
                                <SubmitButton label="复制" onClick={() => { onHandleCopy() }} />
                                <Space />
                                <SubmitButton
                                    danger
                                    label="刷新"
                                    onClick={() => { onHandleRefresh() }}
                                    disabled={isLoading}
                                />
                            </FlexRow>
                        </FlexColumn>
                    </FlexRowItem>
                </FlexRow>

                <Space size="24px" />

                <LineRow />
                <Space size="16px" />

                <Paragraph>
                    <Title>说明</Title>
                    <Text>请复制对应的配置到本地修改, 然后再发给后端更新</Text>
                </Paragraph>
            </Card>
        </div>
    )
}